<template>
    <div class="pageWrapper">
        <h3 class="title">已选 <span>{{tableData.length}}</span> 条交易子订单，是否进行统一的批量备注。</h3>
        <Table :columns="columns" :data="currentData" border></Table>
        <div :style="{textAlign: 'right'}" style="margin-top: 20px">
            <Page :total="tableData.length" :current="currentPage" :page-size="pageSize" show-total show-elevator show-sizer @on-change="handlePageChange" @on-page-size-change="handlePageSizeChange" />
        </div>
        <AbnormalCause :differenceList="differenceList" @submit="submitFun"></AbnormalCause>
    </div>
</template>
<script>
import {
    Modal,
    Message,
    Col,
    Row,
    Table,
    Page
} from "view-design";
import AbnormalCause from "@/components/AbnormalCause";
import { namespace } from "../Module/clearingAbnormalModule";
import Authc from "@/components/Authc";
import config from "@/utils/config";
import appService from "@/utils/appService";
import util from '@/utils/util';

export default {
    name: "clearingAbnormalRemark",
    components: {
        Authc,
        Modal,
        Message,
        Col,
        Row,
        Table,
        Page,
        AbnormalCause
    },
    data() {
        return {
            namespace: namespace,
            loading: true,
            differenceList: [], /** 差异原因 **/
            tableData: [],  /** 所有选中的数据 **/
            currentData: [], /** 当前页面的数据 **/
            currentPage: 1,
            pageSize: 10,
            columns: [
                {
                    title: "序号",
                    type: "index",
                    align: "center",
                    minWidth: 60
                },
                {
                    title: "清分日期",
                    key: "clearDate",
                    align: "center",
                    minWidth: 130
                },
                {
                    title: "主订单号",
                    key: "orderId",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "子订单号",
                    key: 'subOrderId',
                    align: "center",
                    minWidth: 220
                },
                {
                    title: "商户号",
                    key: "subMchId",
                    align: "center",
                    minWidth: 220
                },
                {
                    title: "商品名称",
                    key: "merchantName",
                    align: "center",
                    minWidth: 220
                },
                {
                    title: "清分金额",
                    key: "clearAmount",
                    align: "center",
                    minWidth: 100,
                    render: (h, params) => {
                        let item = params.row.clearAmount / 100;
                        return h('span', util.toMoney(item));
                    },
                },
                {
                    title: "清分记账数",
                    key: "clearCount",
                    align: "center",
                    minWidth: 100
                },
                {
                    title: "招行订单号",
                    key: "bankOrderId",
                    align: "center",
                    minWidth: 240
                },
                {
                    title: "清分批次号",
                    key: "clearBatchNo",
                    align: "center",
                    minWidth: 180
                },
                {
                    title: "清分金额",
                    key: "bankClearAmount",
                    align: "center",
                    minWidth: 100,
                    render: (h, params) => {
                        let item = params.row.bankClearAmount / 100;
                        return h('span', util.toMoney(item));
                    },
                },
                {
                    title: "清分记账数",
                    key: "bankClearCount",
                    align: "center",
                    minWidth: 100
                },
            ],
        };
    },
    created() {
        this.tableData = JSON.parse(sessionStorage.getItem(`${namespace}/batchData`));
        this.currentData = this.pagination(this.currentPage, this.pageSize);
        this.getDiffCauseList();
    },
    mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    },
    methods: {
        /** 获取差异原因 **/
        async getDiffCauseList(){
            try {
                let obj = {
                    module: 'settlement_diff_config'
                }
                let res = await this.$store.dispatch(`${namespace}/getDiffCauseList`, obj);
                this.differenceList = res.data.data.map(e => {
                    return {
                        key: e.code,
                        value: e.name,
                        type: e.type
                    }
                });
                // this.differenceList.push({
                //     key: 'custom',
                //     value: '自定义'
                // });
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /**
         * 前端分页
         * 根据当前页，页数大小取数据
         *  **/
        pagination(currentPage, pageSize) {
            console.log(this.tableData)
            var offset = (currentPage - 1) * pageSize;
            return (offset + pageSize >= this.tableData.length) ? this.tableData.slice(offset, this.tableData.length) : this.tableData.slice(offset, offset + pageSize);
        },
        /** 分页变化 **/
        handlePageChange(currentPage){
            this.currentData = this.pagination(currentPage, this.pageSize);
        },
        /** 分页大小变化 **/
        handlePageSizeChange(pageSize){
            this.currentData = this.pagination(this.currentPage, pageSize);
        },
        /** 获取差异原因 **/
        submitFun(data) {
            try {
                let type = this.currentData[0].abnormalType;
                let codes = [];
                let error_type = '';
                if (type == 3) {
                    codes = this.tableData.map(e => e.bankOrderId);
                    error_type = '1';
                } else {
                    codes = this.tableData.map(e => e.subOrderId);
                    error_type = '0';
                }
                // let codes = this.currentData.map(e => e.subOrderId);
                let para = {
                    codes: codes,
                    errorRemark: data.errorRemark,
                    error_code: data.error_code,
                    error_type: Number(error_type)
                }
                Modal.confirm({
                    render: (h, params) => {
                        return h("div", [
                            h("div",{},"提交后不可更改差异原因和备注，是否确认提交?")
                        ]);
                    },
                    onOk: async () => {
                        await this.$store.dispatch(`${namespace}/postAbnormaRemark`,para);
                        this.$Message.success({
                            content: "处理成功！"
                        });
                        setTimeout(() => {
                            this.$router.back(-1);
                        }, 1000);
                    }
                });
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        }
    }
};
</script>
<style scoped>
.title {
  display: inline-block;
  font-size: 14px;
}
.title span {
  font-size: 18px;
  color: #3399ff;
}
</style>
